<template>
  <div>
    <!-- 头部 -->
    <div class="header">
      智慧城市大气环境监测平台
    </div>
    <!-- 体部 -->
    <div class="content">
      <!-- 上边占2份 -->
      <div class="top">
        <div class="left">
          <div class="chart">
            <!-- 组件使用 标签 -->
            <Left1></Left1>
          </div>
          <div class="chart">
            <Left2></Left2>
          </div>
        </div>
        <div class="center">
          <Map style="height: 100%;"></Map>
        </div>
        <div class="right">
          <div class="chart">
            <Right1></Right1>
          </div>
          <div class="chart">
            <Right2></Right2>
          </div>
        </div>
      </div>
      <!-- 下方占1份 -->
      <div class="bottom">
        <div class="chart">
          <Bottom1></Bottom1>
        </div>
        <div class="chart">
          <Bottom2></Bottom2>
        </div>
        <div class="chart">
          <Bottom3></Bottom3>
        </div>
        <div class="chart">
          <Bottom4></Bottom4>
        </div>
      </div>
    </div>
  </div>
</template>
<!-- 业务逻辑 js代码 -->
<script>
// 组件使用 
// 1.引入组件 
import Left1 from './components/Left1.vue'
import Left2 from './components/Left2.vue'
import Right1 from './components/Right1.vue'
import Right2 from './components/Right2.vue'
import Bottom1 from './components/Bottom1.vue'
import Bottom2 from './components/Bottom2.vue'
import Bottom3 from './components/Bottom3.vue'
import Bottom4 from './components/Bottom4.vue'
import Map from './components/Map.vue'
export default {
  // 2.注册组件 局部注册
  components: {
    Left1,
    Left2,
    Right1,
    Right2,
    Bottom1,
    Bottom2,
    Bottom3,
    Bottom4,
    Map
  },
  data() {
    return {

    }
  }
}
</script>
<!-- scoped 局部生效 作用域 -->
<style lang="less" scoped>
.header {
  height: 60px;
  /* 背景图片 */
  background-image: url(../assets/layout/header.png);
  /* 设置背景图片尺寸 */
  background-size: 100% 200px;
  /* 设置文字大小 */
  font-size: 28px;
  color: white;
  /* 文字水平居中 */
  text-align: center;
  /* 设置行高 */
  line-height: 50px;
  /* 设置文字类型 */
  font-family: "楷体";
}

// 体部样式
.content {
  height: calc(100vh - 60px);
  // 设置伸缩盒
  display: flex;
  // 修改主轴排列方向  
  flex-direction: column;

  .top {
    // 占父容器空间2份
    flex: 2;
    display: flex;

    // 组合选择器 
    .left,
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;

      // &表示直接父元素
      &>div {
        flex: 1;
        background-image: url(../assets/layout/chart_box_bg.png);
        background-size: 100% 100%;
        margin: 0px 5px 10px 5px;
      }
    }

    .center {
      flex: 2;
      background-image: url(../assets/layout/chart_center_box_bg.png);
      background-size: 100% 100%;
      margin: 0px 5px 10px 5px;
    }
  }

  .bottom {
    // 占父容器空间1份 
    flex: 1;
    display: flex;

    &>div {
      flex: 1;
      background-image: url(../assets/layout/chart_box_bg.png);
      background-size: 100% 100%;
      margin: 0px 5px 10px 5px;
    }
  }

  // 给所有图表div设置内边距
  .chart {
    padding: 10px 0 0 10px;
  }
}
</style>